<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="选择酒店" prop="hotelName">
                <el-select v-model="queryParams.hotelId" clearable filterable placeholder="请选择">
                    <el-option v-for="item in hotelListAll" :key="item.hotelId" :label="item.hotelName"
                        :value="item.hotelId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="供应商订单号" prop="orderCode">
                <el-input v-model="queryParams.orderCode" placeholder="请输入供应商订单号" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="渠道订单号" prop="eOrderCode">
                <el-input v-model="queryParams.eOrderCode" placeholder="请输入渠道订单号" clearable style="width: 240px" />
            </el-form-item>
            <el-form-item label="客人姓名" prop="names">
                <el-input v-model="queryParams.names" placeholder="请输入客人姓名" clearable />
            </el-form-item>
            <el-form-item label="来单日期" prop="orderReqDateRange">
                <el-date-picker v-model="queryParams.orderReqDateRange" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="入住日期" prop="startTime">
                <el-date-picker v-model="queryParams.startTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item label="离店日期" prop="endTime">
                <el-date-picker v-model="queryParams.endTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleOrderQuery">搜索</el-button>
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="orderList" class="orderDataRowClass">
            <el-table-column label="订单号">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.orderCode }}
                    </div>
                    <div v-if="scope.row.orderCancelCode">
                        {{ scope.row.orderCancelCode }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="编号" prop="eOrderCode" />
            <el-table-column label="酒店/房型">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.hotelName }}
                    </div>
                    <div>
                        {{ scope.row.houseName }}<{{ scope.row.rpName }}>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单状态">
                <template slot-scope="scope">
                    <div v-if="scope.row.orderCancelCode">
                        <div style="margin-bottom: 5px;">
                            <el-tag type="danger">取消</el-tag>
                        </div>
                        <div>
                            <el-tag v-if="scope.row.orderCancelStatus === 0" type="info">待处理</el-tag>
                            <el-tag v-if="scope.row.orderCancelStatus === 1" type="success">已接受</el-tag>
                            <el-tag v-if="scope.row.orderCancelStatus === 2" type="danger">已拒绝</el-tag>
                        </div>
                    </div>
                    <div v-else>
                        <div style="margin-bottom: 5px;">
                            <el-tag>新订</el-tag>
                        </div>
                        <div>
                            <el-tag v-if="scope.row.orderStatus === 0" type="info">待处理</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 1" type="success">已接受</el-tag>
                            <el-tag v-if="scope.row.orderStatus === 2" type="danger">已拒绝</el-tag>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="间 / 夜">
                <template slot-scope="scope">
                    {{ scope.row.fjsNum }}间 / {{ scope.row.dayNum }}夜<br>
                </template>
            </el-table-column>
            <el-table-column label="客人姓名" prop="names" />
            <el-table-column label="结算 / 采购总价">
                <template slot-scope="scope">
                    <div style="color: red;font-weight: bold;">
                        <span v-if="scope.row.payHotelAmount != null">
                            ￥{{ scope.row.payHotelAmount }}
                        </span>
                        <span v-else>
                            ￥{{ scope.row.baseAmountOriginal }}
                        </span>
                    </div>
                    <div>
                        ￥{{ scope.row.cgjOriginal }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="入住 / 离店日期">
                <template slot-scope="scope">
                    {{ scope.row.startTime }} 至<br>
                    {{ scope.row.endTime }}({{ scope.row.dayNum }}夜)
                </template>
            </el-table-column>
            <el-table-column label="入库时间" prop="createTime" width="135px">
                <template slot-scope="scope">

                    {{ formattedDate(scope.row.createReqTime) }}

                </template>
            </el-table-column>
            <el-table-column label="异常类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.refundType">
                        <el-tag v-if="scope.row.refundType === 1" type="danger">提前离店</el-tag>
                        <el-tag v-if="scope.row.refundType === 2" type="danger">违约金</el-tag>
                    </span>
                </template>
            </el-table-column>
            <template slot="append">
                <div class="totalClass">
                    <span class="totalText">合计</span>订单数量：<span class="totalText">{{ totalData.ddsl
                        }}</span>有效订单数量：<span class="totalText">{{ totalData.yxddsl }}</span>间夜总数：<span
                        class="totalText">{{ totalData.jyzs }}</span>结算总额：<span class="totalText1">￥{{ totalData.jsze
                        }}</span>采购总额：<span class="totalText1">￥{{ totalData.cgze }}</span>利润：<span
                        class="totalText1">￥{{ totalData.lr }}</span>
                </div>
            </template>
        </el-table>
        <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="handleOrderQuery" />
    </div>
</template>

<script>
import { getOrderList, getTotalData } from "@/api/hotel/finance";
import { getHotelListAll } from "@/api/hotel/hotel";
export default {
    data() {
        return {
            showSearch: true,
            loading: false,
            hotelListAll: [],
            orderTotal: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            orderList: [],
            totalData: {

            }
        };
    }, created() {
        this.getOrderList();
        this.getHotelListAll();
        this.getTotalData();
    },
    methods: {
        // 获取所有酒店数据,用于酒店下拉框
        getHotelListAll() {
            getHotelListAll().then(response => {
                this.hotelListAll = response.data;
            }
            );
        },
        getOrderList() {
            this.loading = true;
            getOrderList(this.addDateRange(this.queryParams)).then(response => {
                this.orderList = response.rows;
                this.orderTotal = response.total;
                this.loading = false;
            }
            );
        },
        getTotalData() {
            getTotalData(this.addDateRange(this.queryParams)).then(response => {
                this.totalData = response.data;
            }
            );
        },
        handleOrderQuery() {
            this.getOrderList();
            this.getTotalData();
        },
        handleExport(){
            const hotelId = this.queryParams.hotelId;
            const orderCode = this.queryParams.orderCode;
            const eOrderCode = this.queryParams.eOrderCode;
            const names = this.queryParams.names;
            const orderReqDateRange = this.queryParams.orderReqDateRange;
            const startTime = this.queryParams.startTime;
            const endTime = this.queryParams.endTime;
            this.download('hotel/finance/export', {
                orderCode, eOrderCode,
                orderReqDateRange, startTime, endTime, hotelId, names
            }, `财务结算_${new Date().getTime()}.xlsx`)
        }
    },
    computed: {
        formattedDate() {
            return function (date) {
                return date.replace(/T/g, ' ').trim();
            };
        }
    }
};
</script>

<style>
.orderDataRowClass {
    font-size: 12px;
}

.totalClass {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    font-size: 14px;
    background-color: #dfe6ec;
}

.totalText {
    padding-right: 15px;
}

.totalText1 {
    color: #F56C6C;
    font-weight: bold;
    padding-right: 15px;
}
</style>